<template>
  <div>
    <div class="f-16 c_text2 mb-16 fw-6">聊天显示</div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      @submit.native.prevent
    >
      <el-form-item label="" prop="loginType">
        <el-select v-model="queryParams.loginType" placeholder="登录状态" style="width:120px">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="wxid">
        <el-input
          v-model="queryParams.wxid"
          placeholder="搜企微号"
          clearable
          style="width: 220px"
          @keyup.enter.native="handleQuery"
          suffix-icon="el-icon-search"
        />
      </el-form-item>
      <el-form-item label="" prop="status">
        <el-select v-model="queryParams.status" placeholder="显示状态" style="width:120px">
          <el-option label="显示" :value="1" />
          <el-option label="不显示" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" class="commtable chattable" :data="tableList">
      <el-table-column label="聊天企微号" min-width="300px" prop="userName">
        <template slot-scope="scope">
          <div class="flex">
            <img
              src="https://wework.qpic.cn/wwpic3az/472059_fDikGmxURW66p1D_1701391824/0"
              alt=""
              class="iavatar"
            />
            <div class="ml-12">
              <div class="c_222333 accounttext">
                {{ scope.row.username }}
              </div>
              <div class="c_f90 mt-4 accounttext">19911383351@888</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="" prop="phonenumber" min-width="160px">
        <template slot="header">
          <span>登录状态 </span>
          <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
            <div slot="content">只能获取到在线状态下的聊天消息</div>
            <svg-icon icon-class="iquestion" class-name="c_888999 f-14 ml-6" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="dot bg_888999"></span>
          <span class="c_888999">{{ scope.row.status || "离线" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" min-width="160px">
        <template slot="header">
          <span>在线聊天 </span>
          <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
            <div slot="content">勾选后该企微号会出现在在线聊天列<br />表中</div>
            <svg-icon icon-class="iquestion" class-name="c_888999 f-14 ml-6" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checked"></el-checkbox>
          <!-- <span class="c_text2">{{ scope.row.useCount || 0 }}</span> -->
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        min-width="100px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleLogin(scope.row)"
            >登录</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      statusOptions:[
        {label:'在线',value:1},
        {label:'离线',value:2},
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        loginType:'',
        status:'',
        wxid:""
      },
      total: 0,
      loading: false,
      tableList: [{id:1,username:'水电费'}],
    };
  },
  methods: {
    getList() {
      this.loading = true;
      getsubUserList(this.queryParams).then((response) => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleLogin() {},
  },
};
</script>
<style lang="scss" scoped>
.iavatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.accounttext {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.chattable {
  ::v-deep .el-table__header-wrapper th {
    background-color: #f5f5f5;
    padding: 12px 0;
  }
}
</style>